<template>
    <div class="login-page">
        <!--标题-->
        <van-nav-bar title="注册" />
        <!--logo-->
        <img src="../assets/logo.png">
        <!--from表单-->
        <van-form @submit="onSubmit">
            <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <!--立即注册-->
            <router-link to="/login" class="reg">已有登录账号</router-link>
            <!--登录-->
            <div style="margin: 16px;">
                <van-button color="#1baeae" round block type="info" native-type="submit">登录</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>

export default {
    data() {
        return {
            username: '',
            password: '',
        };
    },
    methods: {
        onSubmit(values) {
            console.log('submit', values);
        },
    },
};
</script>

<style>
img {
    display: block;
    margin: 32px auto;
}

.reg {
    margin: 16px 0 0 16px;
    color: #1d8afa;
    size: 12px;
}
</style>